html, body {
    height: 100%;
}

.phone {
    width: 50%;
    min-width: 400px;
    height: 70%;
    border: 2px solid black;
    border-radius: 2px;
    margin: 100px auto 0;
}

.nav {
    height: calc(100% / 8);
    background-color: beige;
    opacity: .8;
    /*text-align: center;*/
    position: relative;
    box-shadow: -1px 1px 2px 2px red;
}
.nav>span {
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    margin: auto;
    /*width: 150px;*/
    /*height: 50px;*/
    width: 50%;
    text-align: center;
    height: 25px;
    font-size: 25px;
    /*background-color: red;*/
}

.content {
    height: calc(100% / 8 * 6);
    text-align: center;
    background-color: green;
}

.tabBar {
    height: calc(100% / 8);
    background-color: purple;
    box-sizing: border-box;
    border: 2px solid black;
}

.tabBar>li {
    height: 100%;
    width: 25%;
    float: left;
    box-sizing: border-box;
    border: 2px solid white;
    text-align: center;
}

a {
    color: black;
    font-size: 25px;
}